<template>
  <div>
    <!-- 会员已登录状态显示 -->
    <template v-if="$store.state.ismember">
      <!-- 顶部 -->
      <mt-header title="" class="dm">
        <div slot="left" class="dl" v-for="items in members" :key="items.mid">
          <div class="tp" @click="getgrzl">
            <img :src="`${dts[0].uavatar}`" alt="" />
          </div>
          <div class="login">
            <span>{{ items.mname }}</span
            ><span class="huiyuan">个人会员</span>
            <p class="samhuiyuan">尊敬的山姆会员,您好</p>
          </div>
        </div>
        <div slot="right" class="setup" @click="getupset">
          <span><img src="@/assets/setup01.png" alt="" /></span>
          <span>设置</span>
        </div>
      </mt-header>
      <!-- 会员内容 -->
      <div class="hy_mebor" v-for="itemss in members" :key="itemss.mid">
        <div class="hy_hy">
          <div>
            {{ itemss.mname }}
            <span><img src="@/assets/erweima.png" alt="" />会员卡</span>
          </div>
          <div>优惠卷:0张</div>
        </div>
      </div>
      <!-- 我的服务 -->
      <div class="myservice">
        <!-- 优惠卷 -->
        <div class="my-yh">
          <img src="@/assets/youhui.png" alt="" />
        </div>
        <!-- 我的订单 -->
        <div class="myorder">
          <div class="myorder-it">
            我的订单
            <span>全部订单</span>
          </div>
          <div class="myorder-item">
            <div>
              <img src="@/assets/dfk01.png" alt="" />
              <span>待付款</span>
            </div>
            <div>
              <img src="@/assets/dfh02.png" alt="" />
              <span>待发货</span>
            </div>
            <div>
              <img src="@/assets/dsh03.png" alt="" />
              <span>待收货</span>
            </div>
            <div>
              <img src="@/assets/dpj04.png" alt="" />
              <span>待评价</span>
            </div>
            <div>
              <img src="@/assets/thh05.png" alt="" />
              <span>退换货</span>
            </div>
          </div>
        </div>
        <!-- 我的服务 -->
        <div class="myser">
          <div class="myser-it">我的服务</div>
          <div class="myser-item">
            <div>
              <img src="@/assets/myserrvice01.png" alt="" />
              <span>会员卡详情</span>
            </div>
            <div>
              <img src="@/assets/myserrvice02.png" alt="" />
              <span>购物卡</span>
            </div>
            <div>
              <img src="@/assets/myserrvice03.png" alt="" />
              <span>我的收藏</span>
            </div>
            <div>
              <img src="@/assets/myserrvice04.png" alt="" />
              <span>邀请好友</span>
            </div>
            <div>
              <img src="@/assets/myserrvice05.png" alt="" />
              <span>电子发票</span>
            </div>
            <div>
              <img src="@/assets/myserrvice06.png" alt="" />
              <span>我的评价</span>
            </div>
            <div>
              <img src="@/assets/myserrvice07.png" alt="" />
              <span>帮助中心</span>
            </div>
            <div>
              <img src="@/assets/myserrvice08.png" alt="" />
              <span>用户反馈</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 我常买 -->
      <div class="s-top" style="margin-bottom: 56px">
        <div class="top">
          <div class="samtop">
            <span class="meshop">我常买</span>
          </div>
          <div class="shoping">
            <div class="shop" v-for="(item, index) in shops" :key="index">
              <router-link :to="`/details?cid=${item.cid}`">
              <img class="zhutu" :src="`${item.c_pic}.jpg`" alt="" />
              </router-link>
              <p>{{ item.c_name }}</p>
              <div>
                <span>¥{{ item.c_price }}</span>
                <img src="@/assets/shopcar2.png" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <!-- 会员非登录状态显示 -->
    <template v-else>
      <!-- 顶部 -->
      <mt-header title="">
        <!-- 用户已登录状态显示 -->
        <template v-if="$store.state.islogin">
          <div slot="left" class="dl" v-for="item in dts" :key="item.uid">
            <div class="tp" @click="getgrzl">
              <img :src="`${item.uavatar}`" />
            </div>
            <div class="login">
              <span>{{ item.uname }}</span
              ><span class="moder" @click="getvipbd">绑定会员卡</span>
              <p>尊敬的山姆用户,您好</p>
            </div>
          </div>
        </template>
        <!-- 用户非登录状态显示 -->
        <template v-else>
          <div slot="left" class="dl">
            <div class="tp">
              <img src="../../public/mrtx/mrtx.png" alt="" />
            </div>
            <div class="login">
              <span @click="getData">登录</span>
              <p>欢迎来到山姆会员商店</p>
            </div>
          </div>
        </template>
        <div slot="right" class="setup" @click="getupset">
          <span><img src="../assets/setup01.png" alt="" /></span
          ><span>设置</span>
        </div>
      </mt-header>
      <!-- 会员内容 -->
      <div class="contar">
        <img src="../assets/me-huiyuan.jpg" alt="" @click="getvip" />
      </div>
      <!-- 我的服务 -->
      <div class="service">
        <h4>我的服务</h4>
        <!-- 用户已登录状态显示 -->
        <div class="help" v-if="$store.state.islogin">
          <div>
            <img src="../assets/youhuijuan.png" alt="" />
            <span>优惠卷</span>
          </div>
          <div>
            <img src="../assets/pinjia.png" alt="" />
            <span>我的评价</span>
          </div>
          <div>
            <img src="../assets/help.png" alt="" />
            <span>帮助中心</span>
          </div>
          <div>
            <img src="../assets/reid.png" alt="" />
            <span>用户反馈</span>
          </div>
        </div>
        <!-- 用户非登录状态显示 -->
        <div class="help" v-else>
          <div>
            <img src="../assets/help.png" alt="" />
            <span>帮助中心</span>
          </div>
          <div>
            <img src="../assets/reid.png" alt="" />
            <span>用户反馈</span>
          </div>
        </div>
      </div>
      <!-- 山姆top榜单 -->
      <div class="s-top" style="margin-bottom: 56px">
        <div class="top">
          <div class="samtop">
            <img src="../assets/top.png" alt="" />
            <span>山姆TOP榜单</span>
          </div>
          <div class="shoping">
            <div class="shop" v-for="(item, index) in shops" :key="index">
              <router-link :to="`/details?cid=${item.cid}`">
                <img class="zhutu" :src="`${item.c_pic}.jpg`" alt="" />
              </router-link>
              <p>{{ item.c_name }}</p>
              <div>
                <span>¥{{ item.c_price }}</span>
                <img src="@/assets/shopcar2.png" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <!-- 底部 -->
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="shoye" @click.native.capture="getshoye"
        >首页
        <img v-if="selected == 'shoye'" slot="icon" src="@/assets/shoye2.png" />
        <img v-else slot="icon" src="@/assets/shoye1.png" />
      </mt-tab-item>
      <mt-tab-item id="fenlei" @click.native.capture="getfenlei"
        >分类
        <img
          v-if="selected == 'fenlei'"
          slot="icon"
          src="@/assets/fenlei2.png"
        />
        <img v-else slot="icon" src="@/assets/fenlei1.png" />
      </mt-tab-item>
      <mt-tab-item id="shopcar" @click.native.capture="getto"
        >购物车
        <img
          v-if="selected == 'shopcar'"
          slot="icon"
          src="@/assets/shopcar2.png"
        />
        <img v-else slot="icon" src="@/assets/shopcar1.png" />
      </mt-tab-item>
      <mt-tab-item id="me"
        >我的
        <img v-if="selected == 'me'" slot="icon" src="@/assets/me2.png" />
        <img v-else slot="icon" src="@/assets/me1.png" />
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: "me",
      counted: "1",
      dts: [],
      members: [],
      shops: [],
    };
  },
  activated() {},
  deactivated() {},
  mounted() {
    if (this.$store.state.islogin) {
      this.getlogin();
    }
    if (this.$store.state.ismember) {
      this.getloginvip();
    }
    this.gettop(); //初始化商品top
  },
  methods: {
    getData() {
      this.$router.push("/login");
    },
    getto() {
      this.$router.push("/myshopcar");
    },
    getshoye() {
      this.$router.push("/");
    },
    getfenlei() {
      this.$router.push("/myfenlei");
    },
    getgrzl() {
      this.$router.push("/mygrzl");
    },
    getlogin() {
      this.axios
        .post("/user/loginok", `uphone=${this.$store.state.uphone}`)
        .then((res) => {
          this.dts = res.data.data;
          this.$store.commit("loginok", this.dts[0].uid);
          console.log(res);
        });
    },
    getloginvip() {
      this.axios
        .post("/user/loginvip", `mphone=${this.$store.state.mphone}`)
        .then((res) => {
          this.members = res.data.data;
          console.log(res);
        });
    },
    getvip() {
      this.$router.push("/vip");
    },
    getvipbd() {
      this.$router.push("/vipbd");
    },
    getupset() {
      this.$router.push("/myupset");
    },
    gettop() {
      let r = Math.floor(Math.random() * 18 + 1);
      this.axios.get(`/shop/goods?page=${r}`).then((res) => {
        this.shops = res.data.data;
        console.log(res);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.setup {
  position: relative;
  top: -25px;
  color: black;
  img {
    width: 6vw;
  }
}
.myservice {
  background-color: #d8d8d84f;
  padding: 1vw 0;
  .my-yh {
    width: 90vw;
    margin: auto;
    margin-bottom: 3vw;
    img {
      width: 90vw;
    }
  }
  .myorder {
    background-color: #fff;
    width: 90vw;
    margin: auto;
    font-size: 14px;
    .myorder-it {
      padding: 5vw 0;
      width: 80vw;
      margin: auto;
      border-bottom: 1px solid #d8d8d8;
      font-size: 16px;
      font-weight: bold;
      span {
        float: right;
        font-size: 14px;
        font-weight: normal;
      }
    }
    .myorder-item {
      padding: 5vw 0;
      width: 80vw;
      margin: auto;
      display: flex;
      justify-content: space-between;
      text-align: center;
      img {
        width: 10vw;
        height: 10vw;
      }
      span {
        display: block;
        margin-top: 5px;
      }
    }
  }
  .myser {
    background-color: #fff;
    width: 90vw;
    margin: 3vw auto 0;
    font-size: 14px;
    .myser-it {
      padding: 5vw 0;
      width: 80vw;
      margin: auto;
      border-bottom: 1px solid #d8d8d8;
      font-size: 16px;
      font-weight: bold;
    }
    .myser-item {
      padding: 5vw 0;
      width: 80vw;
      margin: auto;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      text-align: center;
      div {
        width: 20vw;
        margin-top: 10px;
        img {
          width: 8vw;
          height: 8vw;
        }
        span {
          display: block;
          margin-top: 5px;
        }
      }
    }
  }
}
.hy_mebor {
  background-color: rgba(12, 53, 236, 0.466);
  .hy_hy {
    width: 90vw;
    height: 25vw;
    margin: auto;
    background-color: rgba(255, 255, 255, 0.521);
    border-top-left-radius: 2vw 2vw;
    border-top-right-radius: 2vw 2vw;
    div {
      width: 80vw;
      margin: auto;
      font-size: 18px;
      padding-top: 6vw;
      &:nth-child(1) {
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        img {
          display: inline-block;
          width: 6vw;
          margin-right: 5px;
        }
        span {
          font-weight: normal;
          font-size: 14px;
        }
      }
    }
  }
}
.mint-tabbar.is-fixed {
  z-index: 99;
}
.dm {
  background-color: rgba(12, 53, 236, 0.466) !important;
}
.samhuiyuan {
  color: #fff !important;
}
.mint-header {
  background-color: rgba(207, 124, 15, 0.596);
  height: 80px;
  padding: 0 5vw;
  .dl {
    display: flex;
    .tp {
      width: 50px;
      height: 50px;
      border-radius: 50% 50%;
      background-color: #fff;
      text-align: center;
      overflow: hidden;
      img {
        display: block;
        width: 50px;
        height: 50px;
      }
    }
    .login {
      font-size: 16px;
      align-content: center;
      padding-top: 10px;
      padding-left: 10px;
      span {
        display: inline-block;
        font-size: 16px;
        font-weight: bold;
        color: black;
      }
      span.moder {
        background-color: #000;
        padding: 1vw 2vw;
        font-size: 14px;
        color: #fff;
        margin-left: 5px;
        border: 1px solid black;
        border-radius: 5px 5px;
      }
      span.huiyuan {
        background-color: #fff;
        padding: 1vw 2vw;
        font-size: 14px;
        color: rgba(0, 0, 255, 0.404);
        margin-left: 5px;

        border-radius: 5px 5px;
      }
      p {
        font-size: 14px;
        margin-top: 5px;
        color: #7c7c7c;
      }
    }
  }
}
.hj {
  font-size: 16px !important;
  color: #7c7c7c !important;
}
.contar {
  width: 100vw;
  margin: auto;
  background-color: rgba(207, 124, 15, 0.596);
  img {
    display: block;
    width: 90vw;
    margin: auto;
  }
}
.service {
  width: 100vw;
  margin: auto;
  background-color: #d8d8d84f;
  padding-top: 1vw;
  h4 {
    padding: 1vw;
    font-size: 18px;
    color: rgba(207, 124, 15, 0.596);
    width: 20vw;
    margin: 1vw auto 3vw;
  }
  .help {
    width: 90vw;
    padding: 2vw 0;
    margin: auto;
    display: flex;
    div {
      width: 21vw;
      margin-right: 1vw;
      text-align: center;
      img {
        display: block;
        width: 10vw;
        margin: auto;
      }
      span {
        display: inline-block;
        font-size: 14px;
        margin: 3vw 0;
        display: block;
      }
    }
  }
}
.s-top {
  width: 100vw;
  background-color: #d8d8d84f;
  .top {
    width: 90vw;
    margin: auto;
    .samtop {
      width: 90vw;
      img {
        display: inline-block;
        width: 5vw;
        vertical-align: bottom;
      }
      span {
        display: inline-block;
        margin-left: 1vw;
        font-size: 18px;
        color: #000;
        font-weight: bold;
      }
      span.meshop {
        width: 90vw;
        text-align: center;
        font-size: 16px;
        font-weight: normal;
        padding: 3vw 0;
      }
    }
    .shoping {
      width: 90vw;
      margin-top: 3vw;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: space-between;
      .shop {
        position: relative;
        background-color: #fff;
        width: 43vw;
        margin-bottom: 3vw;
        height: 80vw;
        .zhutu {
          width: 43vw;
        }
        p {
          font-size: 14px;
          color: #000;
          padding: 2vw;
        }
        div {
          position: absolute;
          bottom: 5px;
          width: 38vw;
          padding: 4vw 2vw;
          display: flex;
          justify-content: space-between;
          span {
            display: block;
            font-size: 18px;
            font-weight: bold;
            color: red;
          }
          img {
            display: block;
            width: 6vw;
          }
        }
      }
    }
  }
}
</style>
